<template>
    <div class="box">
        <div class="panel">
            <div class="header">基本信息</div>
            <div class="bd">
                <div class="fm-short">
                    <el-row >
                        产品状态：
                        <span v-if="data.status == 1">正常</span>
                        <span v-if="data.status == 0">下架</span>
                    </el-row>
                    <el-row >产品名称：{{data.categoryGroupName}}</el-row>
                    <el-row >产品简介：{{data.brief}}</el-row>
                    <el-row >景区名称：{{data.goodsName}}</el-row>
                    <el-row >省份名称：{{data.provName}}</el-row>
                    <el-row >城市名称：{{data.cityName}}</el-row>
                    <el-row >区县名称：{{data.countyName}}</el-row>
                    <el-row >营业时间：
                        <span v-if="data.openStartTime">{{data.openStartTime}} - {{data.openStopTime}}<br/></span>
                        <span v-if="data.openStartTime2">{{data.openStartTime2}} - {{data.openStopTime2}}<br/></span>
                        <span v-if="data.openStartTime3">{{data.openStartTime3}} - {{data.openStopTime3}}<br/></span>
                    </el-row>
                    <el-row >商家电话：{{data.contactNumber}}</el-row>
                    <el-row >预约须知：{{data.bookingReading}}</el-row>
                    <el-row >产品提示：{{data.ordersTips}}</el-row>
                    <el-row >产品详情：
                        <div v-html="data.description" />
                    </el-row>
                    <el-row >预定须知：
                        <div v-html="data.notice" />
                    </el-row>
                    <el-row >门票类型：
                        <el-radio-group :value="data.goodsType" >
                            <el-radio :label="1">普通票</el-radio>
                            <el-radio :label="2">套票</el-radio>
                            <el-radio :label="3">路线</el-radio>
                        </el-radio-group>
                    </el-row>
                    <el-row >门票数量（总库存）：{{data.amount}}张</el-row>
                    <el-row >门票数量（每日）：{{data.amountDay}}张</el-row>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="header">价格</div>
            <div class="bd">
                <el-row >
                    <el-col :span="3">市场价：￥{{data.skuMarketPrice}}</el-col>
                    <el-col :span="3">本日的市场价：￥{{data.originalPrice}}</el-col>
                </el-row>
                <el-row >
                    <el-col :span="3">分销价：￥{{data.skuUserPrice}}</el-col>
                    <el-col :span="3">本日的分销价：￥{{data.nettPrice}}</el-col>
                </el-row>
                <el-row >
                    <el-col :span="3">指导价：￥{{data.skuSuggestPrice}}</el-col>
                    <el-col :span="3">本日的指导价：￥{{data.marketPrice}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="panel">
            <div class="header">退票</div>
            <div class="bd">
                <el-row >退款说明：{{data.refundMessage}}</el-row>
                <el-row >是否支持部分退单：
                    <el-radio-group :value="data.refundPart" >
                        <el-radio :label="1">支持</el-radio>
                        <el-radio :label="0">不支持</el-radio>
                    </el-radio-group>
                </el-row>
                <el-row >退票限制类型：
                    <el-radio-group :value="data.refundType" >
                        <el-radio :label="1">允许退票</el-radio>
                        <el-radio :label="2">不可退票</el-radio>
                        <el-radio :label="3">管理员审核</el-radio>
                    </el-radio-group>
                </el-row>
                <el-row >退单限制时间：
                    <el-radio-group :value="data.selfRefundTimeType" >
                        <el-radio :label="1">订单过期之后</el-radio>
                        <el-radio :label="2">订单过期之前</el-radio>
                    </el-radio-group>
                </el-row>
                <el-row >退票手续费：
                    <el-radio-group :value="data.refundChanrgeType" >
                        <el-radio :label="1">按票数计算每张{{data.selfRefundFixed}}元</el-radio>
                        <el-radio :label="2">按订单百分比计算每单{{data.selfRefundScale}}%</el-radio>
                    </el-radio-group>
                </el-row>
            </div>
        </div>
        <div class="panel">
            <div class="header">其他</div>
            <div class="bd">
                <el-row >
                    <el-col :span="5">产品有效期开始时间：{{data.startTime | showDate}}</el-col>
                    <el-col :span="5">订单有效期：{{data.validityDay}}</el-col>
                </el-row>
                <el-row >产品信息最近更新时间：{{data.modifyTime | showDate}}</el-row>
                <el-row >下单时是否必须提供身份证号码：
                    <el-radio-group :value="data.mustIdNumber" >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-row>
                <el-row >最晚下单时间：{{data.lastOrderDate}}</el-row>
               <!-- <el-row >当下单时间超过最晚下单时间时是否允许下单且有效期自动延后：
                    <el-checkbox-group v-model="data.lastOrderTimeDelay" >
                        <el-checkbox label="1">禁止下单</el-checkbox>
                        <el-checkbox label="2">允许下单</el-checkbox>
                        <el-checkbox label="3">禁止下当天订单，允许下次日及以后订单</el-checkbox>
                    </el-checkbox-group>
                </el-row>-->
                <el-row >同一手机号限购设置，每天最多可购买{{data.mbLimitAmount === 0? '无限': data.mbLimitAmount}}张
                </el-row>
                <el-row >
                    同一手机号限购设置，每天最多可购买{{data.mbLimitOrders === 0? '无限': data.mbLimitOrders}}笔订单
                </el-row>
                <el-row>
                    至少须购买数：
                    <span v-if="data.minNum === 0">不限</span>
                    <span v-else>{{data.minNum}}</span>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils'

export default {
  data () {
    return {
      data: {
        mustIdNumber: '',
        lastOrderTimeDelay: '',
        refundChanrgeType: '',
        refundType: '',
        selfRefundTimeType: ''

      }
    }
  },
  filters: {
    // 评论时间格式化
    showDate (value) {
      const date = new Date(value * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getData()
  },
  watch: {
    $route: {
      handler (to, form) {
        if (to.name == 'resourceDetail') {
          this.active = '1'
          this.id = to.params.id
          this.getData()
        }
      },
      deep: true
    }
  },
  methods: {
    getData () {
      this.$http.get('/resource/getGoodsInfo', { params: { id: this.id } }).then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        this.data = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .box{
        padding: 15px;
        line-height: 2;
        background: #fff;
    }
    .bd{
        padding: 0 20px;
    }
    .header,.hd {
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #e9e9e9;
        margin-bottom: 15px;
        span {
            font-size: 12px;
            color: #999;
            font-weight: normal;
            margin-left: 10px;
        }
    }

    .hd::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
    }

</style>
